<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">发布动态</block>
		</cu-custom>
		<view class="container">
			<view class="title-input">
				<input v-model="form.title" placeholder="标题(选填)" />
			</view>
			<textarea placeholder="这一刻的想法..." :auto-height="true" maxlength="-1" v-model="form.content"
				class="post-txt"></textarea>
			<!-- 上传图片 -->
			<!-- <block v-if="form.type == 1"> -->
				<u-upload ref="uUpload" :size-type="['compressed']" name="Image" :max-count="9" :header="header"
					:action="uploadImgUrl" @on-uploaded="submit" :auto-upload="false"></u-upload>
			<!-- </block> -->
			<!-- 上传视频 -->
			<block v-if="form.type == 2">
				<view v-if="form.media.length == 0" class="upload-wrap" @click="chooseVideo">
					<image class="icon" :src=" imgUrl + '/video.png'"></image>
					<text>上传视频</text>
				</view>
				<video v-if="form.media.length > 0" @click="chooseVideo" :controls="false" :show-center-play-btn="false"
					class="upload-video" :src="form.media[0]"></video>
			</block>
			<!-- 选择圈子 -->
			<navigator v-if="isTopic" url="/pages/choose-topic/choose-topic" class="choose-item">
				<image class="icon" :src="imgUrl + '/p_1.png'"></image>
				<text class="txt">选择圈子</text>
<!-- 				<text class="txt">{{ topicName }}</text> -->
				<u-icon class="u-icon" name="arrow-right"></u-icon>
			</navigator>
			<!-- 选择话题 -->
			<navigator v-if="!isTopic" :url="'/pages/choose-discuss/choose-discuss?topic_id=' + form.topic_id"
				class="choose-item">
				<image class="icon" :src="imgUrl + '/m_1.png'"></image>
				<!-- <text class="txt">{{ disName }}</text> -->
				<text class="txt">选择话题</text>
				<u-icon class="u-icon" name="arrow-right"></u-icon>
			</navigator>
			<!-- 所在位置 -->
			<view @click="chooseLocation" class="choose-item">
				<u-icon class="icon add-icon" name="map" color="#999" size="40"></u-icon>
				<text class="txt">{{ form.address || '所在位置' }}</text>
				<u-icon class="u-icon" name="arrow-right"></u-icon>
			</view>
			<view class="submit-btn">
				<q-button v-if="form.type == 1" @click="uploadImg" shape="circle">发布</q-button>
				<q-button v-if="form.type == 2" @click="videoSubmit" shape="circle">发布</q-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$site.img_url,
				// uploadImgUrl: this.$c.domain + 'common/upload',
				topicName: '选择圈子',
				disName: '选择话题',
				form: {
					title: '',
					type: 1,
					topic_id: '',
					discuss_id: '',
					content: '',
					media: [],
					longitude: 0,
					latitude: 0,
					address: ''
				},
				header: {
					token: uni.getStorageSync('token')
				},
				isTopic: true
			};
		},
		onLoad(options) {
			this.form.type = options.type;

			if (options.is_topic) {
				this.isTopic = options.is_topic;
			}

			if (options.topic_id) {
				this.form.topic_id = options.topic_id;
				this.isTopic = false;
			}
			if (options.discuss_id) {
				this.form.discuss_id = options.discuss_id;
			}

			let location = uni.getStorageSync('location_info');
			this.form.longitude = location.longitude;
			this.form.latitude = location.latitude;
		},
		methods: {
			chooseVideo() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						let viedoPath = res.tempFilePath;

						uni.showLoading({
							mask: true,
							title: '上传中'
						});

						uni.uploadFile({
							url: self.$c.domain + 'common/uploadFile',
							filePath: viedoPath,
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: uploadFileRes => {
								let upData = JSON.parse(uploadFileRes.data);
								if (upData.code == 200) {
									self.form.media.push(upData.result.url);
								}
							},
							complete() {
								uni.hideLoading();
							}
						});
					}
				});
			},
			uploadImg() {
				if (!this.form.topic_id) {
					this.$u.toast('请选择圈子');
					return;
				}

				if (!this.form.content) {
					this.$u.toast('内容不能为空');
					return;
				}

				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				this.$refs.uUpload.upload();
			},
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.form.address = res.name;
						that.form.latitude = res.latitude;
						that.form.longitude = res.longitude;
					}
				});
			},
			videoSubmit() {
				if (this.form.media.length == 0) {
					this.$u.toast('请上传视频');
					return;
				}

				if (!this.form.topic_id) {
					this.$u.toast('请选择圈子');
					return;
				}
				uni.showLoading({
					mask: true,
					title: '发布中'
				});
				this.$H.post('post/addPost', this.form).then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/post/video-detail?id=' + res.result.id
						});
					}
					uni.hideLoading();
				});
			},
			submit(e) {
				uni.showLoading({
					mask: true,
					title: '发布中'
				});

				let mediaList = [];
				e.forEach(function(item, index) {
					mediaList.push(item.response.result.url);
				});

				this.form.media = mediaList;

				this.$H.post('post/addPost', this.form).then(res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/post/detail?id=' + res.result.id
						});
					}
					uni.hideLoading();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title-input {
		border-bottom: 1px solid #F5F5F5;
		background: #FFFFFF;
		margin: 20rpx 0;
		padding: 20rpx 0;

		input {
			padding: 0 20rpx;
		}
	}

	.post-txt {
		width: 100%;
		padding: 20rpx 20rpx;
		background: #FFFFFF;
		min-height: 300rpx;
	}

	.upload-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 180rpx;
		background-color: #F5F5F5;
		margin-top: 30rpx;
		border-radius: 10rpx;

		.icon {
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 24rpx;
		}
	}

	.upload-video {
		width: 180rpx;
		height: 180rpx;
		margin-top: 30rpx;
	}

	.choose-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		&:last-child {
			border: 0;
		}

		.txt {
			margin-left: 20rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}

		.u-icon {
			margin-left: auto;
			color: #999;
		}

		.add-icon {
			margin-left: 0;
		}
	}

	.submit-btn {
		margin-top: 50rpx;
	}
</style>
